<script setup>
import NotifyMessageList from "@/views/contract/home/notifyMessageList.vue";
import MyContract from "@/views/contract/home/myContract.vue";
import ProcessingContract from "@/views/contract/home/processingContract.vue";
import useLoginUserStore from "@/store/modules/user.js";
import useAppStore from "@/store/modules/app.js";

const device = computed(() => useAppStore().device);

const permissions = useLoginUserStore().permissions
const isContainsMyContract = ref(permissions.indexOf("con:my:page") >= 0)
const isContainsProcessContract = ref(permissions.indexOf("con:process:page") >= 0)
</script>

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="18" :xs="24">
        <NotifyMessageList/>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mt10" v-if="isContainsMyContract || isContainsProcessContract">
      <el-col :span="4" :xs="24" v-if="isContainsProcessContract">
        <ProcessingContract/>
      </el-col>
      <el-col :span="14" :xs="24" :class="{'mt10': device === 'mobile'}" v-if="isContainsMyContract">
        <MyContract/>
      </el-col>
    </el-row>
  </div>
</template>
